<template>
  <div class="app-container">
    <el-card header="基础信息" style="width: 100%">
      <div slot="header" class="clearfix">
        <span>基础信息</span>
        <el-button
          type="success"
          @click="handleSave(2)"
          size="mini"
          style="float: right; margin: 0px 10px"
          v-hasPermi="[modulePermi + ':submit']"
        >
          小批验证完成
        </el-button>
        <el-button
          type="primary"
          @click="handleSave(1)"
          size="mini"
          style="float: right; margin: 0px 10px"
          v-hasPermi="[modulePermi + ':save']"
        >
          保存
        </el-button>
      </div>
      <el-form
        class="demo-form-inline"
        :model="form"
        ref="formMain"
        :rules="rules"
        label-width="135px"
        style="width: 100%"
      >
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="客户" prop="jzmName">
              <el-input
                :value="getDictLabel(form.jzmName, customerOptions)"
                disabled
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="机型" prop="itmMstrJzdm">
              <HdSearchInput
                v-model="form.itmMstrJzdm"
                keyName="itmMstrJzdm"
                modulePath="rdmodule/researchData"
                @change="
                  (value) => {
                    handleChangeJzdm(value);
                  }
                "
                placeholder="请选择机种代码"
              ></HdSearchInput>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="小批生产通知单" prop="sublotsProductionOrder">
              <FileUpload
                v-model="form.sublotsProductionOrder"
                :isShowTip="false"
                :fileType="['png', 'jpg', 'jpeg', 'pdf']"
                :deleteBtn="form.researchStatus == 2 ? false : true"
              ></FileUpload>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="客户小批确认单"
              prop="customerSublotsConfirmOrder"
            >
              <FileUpload
                v-model="form.customerSublotsConfirmOrder"
                :isShowTip="false"
                :fileType="['png', 'jpg', 'jpeg', 'pdf']"
                :deleteBtn="form.researchStatus == 2 ? false : true"
              ></FileUpload>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="小批总结会议记录" prop="sublotsSummary">
              <FileUpload
                v-model="form.sublotsSummary"
                :isShowTip="false"
                :fileType="['png', 'jpg', 'jpeg', 'pdf']"
                :deleteBtn="form.researchStatus == 2 ? false : true"
              ></FileUpload>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-tabs v-model="activeName">
        <el-tab-pane label="产品明细" name="first">
          <el-table
            :data="tableData"
            border
            style="width: 100%"
            :height="tableDataHeight"
            height="500px"
          >
            <el-table-column
              type="index"
              label="序号"
              width="50"
            ></el-table-column>
            <el-table-column
              v-for="(item, index) in options"
              :width="item.width"
              :key="index"
              :prop="item.prop"
              :label="item.label"
            ></el-table-column>
            <el-table-column prop="sublotsDate">
              <template #header>
                <span class="required">小批日期</span>
              </template>
              <template #default="scope">
                <el-date-picker
                  clearable
                  size="mini"
                  v-model="scope.row.sublotsDate"
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="选择小批日期"
                ></el-date-picker>
              </template>
            </el-table-column>
            <el-table-column
              label="客户需求小批日期"
              prop="customerDemandSublotsDate"
            >
              <template #default="scope">
                <el-date-picker
                  clearable
                  size="mini"
                  v-model="scope.row.customerDemandSublotsDate"
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="选择客户需求小批日期"
                ></el-date-picker>
              </template>
            </el-table-column>
            <el-table-column
              label="小批验证送样日期"
              prop="sublotsDeliveryDate"
            >
              <template #default="scope">
                <el-date-picker
                  clearable
                  size="mini"
                  v-model="scope.row.sublotsDeliveryDate"
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="选择小批验证送样日期"
                ></el-date-picker>
              </template>
            </el-table-column>
            <el-table-column label="机台吨位" prop="machineTonnage">
              <template #default="scope">
                <el-select
                  v-model="scope.row.machineTonnage"
                  filterable
                  clearable
                  placeholder="请选择机台吨位"
                  @change="scope.row.applyMachine = ''"
                >
                  ">
                  <el-option
                    v-for="dict in jtdwOptions"
                    :key="dict.jtm_jtdw_key"
                    :label="dict.jtm_jtdw"
                    :value="dict.jtm_jtdw_key"
                  ></el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="适用机台" prop="applyMachine">
              <template #default="scope">
                <el-button
                  @click="
                    (params) =>
                      getApplyMachine(
                        scope.row.machineTonnage,
                        scope.row,
                        scope.$index
                      )
                  "
                  type="primary"
                  size="mini"
                >
                  选择机台
                </el-button>
                {{ scope.row.applyMachine }}
              </template>
            </el-table-column>
            <el-table-column prop="sublotsVerifyQuantity">
              <template #header>
                <span class="required">数量</span>
              </template>
              <template #default="scope">
                <el-input-number
                  :controls="false"
                  v-model="scope.row.sublotsVerifyQuantity"
                  size="mini"
                ></el-input-number>
              </template>
            </el-table-column>
            <el-table-column prop="sublotsMouldProcess">
              <template #header>
                <span class="required">小批工艺卡</span>
              </template>
              <template #default="scope">
                <FileUpload
                  v-model="scope.row.sublotsMouldProcess"
                  :limit="1"
                  :isShowTip="false"
                  :fileType="['png', 'jpg', 'jpeg', 'pdf']"
                ></FileUpload>
              </template>
            </el-table-column>
            <el-table-column prop="workInstructions">
              <template #header>
                <span class="required">作业指导书</span>
              </template>
              <template #default="scope">
                <FileUpload
                  v-model="scope.row.workInstructions"
                  :limit="1"
                  :isShowTip="false"
                  :fileType="['png', 'jpg', 'jpeg', 'pdf']"
                ></FileUpload>
              </template>
            </el-table-column>
            <el-table-column prop="sublotsDetectionsCards">
              <template #header>
                <span class="required">检测卡</span>
              </template>
              <template #default="scope">
                <FileUpload
                  v-model="scope.row.sublotsDetectionsCards"
                  :limit="1"
                  :isShowTip="false"
                  :fileType="['png', 'jpg', 'jpeg', 'pdf']"
                ></FileUpload>
              </template>
            </el-table-column>
            <el-table-column prop="sealedSamplePhotos">
              <template #header>
                <span class="required">技术封样照片</span>
              </template>
              <template #default="scope">
                <FileUpload
                  v-model="scope.row.sealedSamplePhotos"
                  :limit="1"
                  :isShowTip="false"
                  :fileType="['png', 'jpg', 'jpeg', 'pdf']"
                ></FileUpload>
              </template>
            </el-table-column>
            <el-table-column
              label="客户是否需要"
              width="120"
              fixed="right"
              :show-overflow-tooltip="true"
              align="center"
            >
              <template #default="scope">
                <el-switch
                  v-model="scope.row.state"
                  :active-value="true"
                  :inactive-value="false"
                ></el-switch>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <el-dialog
      title="选择机台"
      v-model="openChoose"
      :close-on-click-modal="false"
      draggable
      width="500px"
      append-to-body
    >
      <el-table
        v-loading="loading"
        border
        size="mini"
        height="300"
        :data="itmDetList"
        :header-cell-style="{ 'text-align': 'center' }"
        @selection-change="handleSelectionChanges"
      >
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="机台编号" align="center" prop="jtmJtbh" />
        <el-table-column label="机台吨位" align="center" prop="jtmJtdw" />
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelChoose">取 消</el-button>
        <el-button type="primary" @click="handleOK">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
//小批验证
import mixins from "@/mixins/common";
import RdmoduleService from "@/api/rdmodule/rdmodule";
import { getJtmByTon, selectJtmByInput } from "@/api/project/jtm";
export default {
  name: "SmallBatch",
  mixins: [mixins.customerOptions],
  data() {
    return {
      modulePermi: "rdmodule:SmallBatch",
      form: {
        jzmName: "",
        itmMstrJzdm: "",
      },
      activeName: "first",
      tableData: [],
      jtdwOptions: [],
      itmDetList: [],
      Jt: "",
      Jtindex: null,
      openChoose: false,
      loading: false,
      rules: {
        itmMstrJzdm: [{ required: true, message: "请选择机型" }],
        sublotsProductionOrder: [
          { required: true, message: "请上传小批生产通知单" },
        ],
        customerSublotsConfirmOrder: [
          { required: true, message: "请上传客户小批确认单" },
        ],
        sublotsSummary: [{ required: true, message: "请上传小批总结会议记录" }],
      },
      tableDataHeight: "calc(100% - 60px)",
      options: [
        { prop: "itmCustwldm", label: "客户编码" },
        { prop: "bomWldm", label: "物料代码", width: "120px" },
        { prop: "itmPmgg", label: "产品名称" },
      ],
    };
  },
  created() {
    selectJtmByInput().then((res) => {
      this.jtdwOptions = res.data;
    });
    this.$bus.$on("query-NewProductDiagram", (a) => {
      this.form.itmMstrJzdm = a;
      RdmoduleService.getInfo(a).then((res) => {
        if (res.code == 200) {
          this.form = res.data;
          this.form.researchStatus =
            res.data.researchDataPhaseList[3].researchStatus;
          this.$nextTick(() => {
            Object.assign(this.form, res.data);
          });
          this.tableData = res.data.moldDetailList;
        }
      });
    });
  },
  beforeDestroy() {
    this.$bus.$off("query-NewProductDiagram");
  },
  methods: {
    handleSave(val) {
      this.form.moldDetailList = this.tableData;
      this.form.researchPhase = "4";
      this.form.engineer = this.$store.state.user.nickName;
      if (val == 1) {
        this.form.researchStatus = 1;
      } else {
        this.form.researchStatus = 2;
        this.$refs["formMain"].validate((valid) => {
          if (valid) {
            return;
          }
        });
      }

      RdmoduleService.add(this.form).then((res) => {
        if (res.code == 200) {
          this.$message.success("保存成功");
        }
      });
    },
    handleChangeJzdm(val) {
      RdmoduleService.getInfo(val.itmMstrJzdm).then((res) => {
        if (res.code == 200) {
          this.form = res.data;
          this.form.researchStatus =
            res.data.researchDataPhaseList[3].researchStatus;
          this.$nextTick(() => {
            Object.assign(this.form, res.data);
          });
          this.tableData = res.data.moldDetailList;
        }
      });
    },
    getApplyMachine(val, row, index) {
      //applyMachine
      console.log(row, index);
      this.Jtindex = index;
      if (val) {
        getJtmByTon({ jtmJtdw: val }).then((response) => {
          this.itmDetList = response.data;
          this.openChoose = true;
        });
      } else {
        this.$message.error("请先选择机台吨位");
      }
    },
    cancelChoose() {
      this.openChoose = false;
      this.Jt = "";
      this.Jtindex = null;
    },
    handleSelectionChanges(selection) {
      this.jtBh = selection.map((item) => item.jtmJtbh);
      let a = "";
      for (const itm of this.jtBh) {
        a += itm + ",";
      }
      a = a.slice(0, a.length - 1);
      this.Jt = a;
    },
    handleOK() {
      this.tableData[this.Jtindex].applyMachine = this.Jt;
      this.cancelChoose();
    },
  },
};
</script>

<style lang="scss" scoped></style>
